<template>
  <BasicModal
    v-bind="$attrs"
    title="报表打印"
    @register="register"
    :destroyOnClose="true"
    :minHeight="500"
    :width="1500"
  >
    <BasicTable @register="registerTable" v-if="reportType === 'Project'" />
    <BasicTable @register="registerTaskTable" v-else-if="reportType === 'Task'" />
    <BasicTable @register="registerWorkTable" v-else-if="reportType === 'Work'" />
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicTable, useTable } from '/@/components/Table';
  import {
    getProjectReport,
    getProjectReportColumns,
    getTaskReport,
    getTaskReportColumns,
    getWorkReport,
    getWorkReportColumns,
  } from './tableData';

  // 定义弹窗类型
  const reportType = ref('');
  // 定义弹窗是否可见
  const [register] = useModalInner(async (data) => {
    reportType.value = data.reportType;
  });
  // 项目
  const [registerTable] = useTable({
    pagination: { pageSize: 12, pageSizeOptions: ['12', '24', '36', '48'], defaultPageSize: 12 }, // 分页配置
    columns: getProjectReportColumns(),
    useSearchForm: true,
    formConfig: getProjectReport(), // 表单配置
    showIndexColumn: false,
    showTableSetting: true, // 显示表格设置工具
    tableSetting: { fullScreen: true }, // 表格设置工具配置
    rowKey: 'id',
    bordered: true,
  });
  // 任务
  const [registerTaskTable] = useTable({
    pagination: { pageSize: 12, pageSizeOptions: ['12', '24', '36', '48'], defaultPageSize: 12 }, // 分页配置
    columns: getTaskReportColumns(),
    useSearchForm: true,
    formConfig: getTaskReport(), // 表单配置
    showIndexColumn: false,
    showTableSetting: true, // 显示表格设置工具
    tableSetting: { fullScreen: true }, // 表格设置工具配置
    rowKey: 'id',
    bordered: true,
  });
  // 人工
  const [registerWorkTable] = useTable({
    pagination: { pageSize: 12, pageSizeOptions: ['12', '24', '36', '48'], defaultPageSize: 12 }, // 分页配置
    columns: getWorkReportColumns(),
    useSearchForm: true,
    formConfig: getWorkReport(), // 表单配置
    showIndexColumn: false,
    showTableSetting: true, // 显示表格设置工具
    tableSetting: { fullScreen: true }, // 表格设置工具配置
    rowKey: 'id',
    bordered: true,
  });
</script>
<style lang="less" scoped>
  ::v-deep(.rc-virtual-list-scrollbar-thumb) {
    visibility: hidden !important;
  }

  ::v-deep(.ant-calendar-picker) {
    width: 100% !important;
  }
</style>
